import React, { Component } from "react";
import { Card, Form, Input, Button, Table, Popconfirm, Modal, message } from "antd";
import { getRootList, getRoot, addRoot, updateRoot, delRoot } from "./service"
class Root extends Component {
    state = {
        dataSource: [],
        open: false,
        adminname: "",
        password: "",
        role: "",
        checkedKeys: "",
        title: "",
    }
    columns = [
        {
            title: '用户ID',
            dataIndex: 'adminid',
        },
        {
            title: '用户名',
            dataIndex: 'adminname',
        },
        {
            title: 'role',
            dataIndex: 'role',
        },
        {
            title: "操作",
            render: (row) => {
                // 自定义渲染单元格内容
                // 参数1 有dataIndex 直接把dataIndex数据取出来
                // 参数2 是整条数据
                // 参数3 是下标
                return (
                    <>
                        <Popconfirm
                            title="你确定要删除这条数据吗?"
                            okText="确定"
                            cancelText="取消"
                            onConfirm={this.del.bind(this, row.adminid)}
                        >
                            <Button
                                size="small"
                                type="danger"
                            >
                                删除
                            </Button>
                        </Popconfirm>
                        <Button
                            size="small"
                            type="primary"
                            onClick={() => {
                                this.setState({ open: true, title: "update" })
                            }}
                        >
                            更新
                        </Button>
                    </>
                );
            },
        },
    ];
    render() {
        const { dataSource, open, adminname, password, role, checkedKeys, title } = this.state;
        return (
            <div>
                <Card
                    title="管理员管理"
                    headStyle={{ textAlign: "center" }}
                >
                    <Form
                        name="basic"
                        layout="inline"
                        initialValues={{
                            remember: true,
                        }}
                        onFinish={this.onFinish}
                    >
                        <Form.Item
                            label="用户名"
                            name="username"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入用户名!',
                                },
                            ]}
                        >
                            <Input
                                placeholder="请输入用户名"
                                showCount={true}
                                style={{
                                    width: 300
                                }}
                            />
                        </Form.Item>

                        <Form.Item
                            wrapperCol={{
                                span: 8,
                            }}
                        >
                            <Button type="primary" htmlType="submit">
                                搜索
                            </Button>
                        </Form.Item>
                        <Button
                            type="primary"
                            shape={"round"}
                            style={{
                                float: "right",
                            }}
                            onClick={() => {
                                this.setState({ open: true, title: "add" })
                            }}
                        >添加管理员</Button>
                    </Form>
                    <br />
                    <Table
                        dataSource={dataSource}
                        columns={this.columns}
                        rowKey="adminid"
                        tableLayout={"fixed"}
                        pagination={{
                            position: ["bottomCenter"],
                            pageSize: 5,
                        }}
                    />
                    <Modal
                        title={title}
                        open={open}
                        onOk={this.handleOk.bind(this, {
                            adminname, password, role, checkedKeys
                        })}
                        onCancel={() => {
                            this.setState({ open: false })
                        }}
                    >
                        用户名：<Input onInput={(e) => {
                            this.setState({ adminname: e.target.value })
                        }} />
                        密码：<Input.Password onInput={(e) => {
                            this.setState({ password: e.target.value })
                        }} />
                        role：<Input onInput={(e) => {
                            this.setState({ role: e.target.value })
                        }} />
                        checkedKeys: <Input onInput={(e) => {
                            this.setState({ checkedKeys: e.target.value })
                        }} />
                    </Modal>
                </Card>
            </div>);
    }
    onFinish = async (values) => {
        const { code, data } = (await getRoot(values.username)) || {};
        if (code !== "200") return message.error("查询失败");
        message.success('查询成功');
        this.setState({ dataSource: data });
    }
    getRoots = async () => {
        const { code, data } = (await getRootList()) || {};
        if (code !== "200") return message.error("获取管理员列表失败");
        message.success("获取管理员列表成功");
        this.setState({ dataSource: data });
    }
    handleOk = async (payload) => {
        let res = {};
        if (this.state.title === "add") {
            res = (await addRoot(payload)) || {};
        } else {
            res = (await updateRoot(payload)) || {};
        }
        const { code, message: msg } = res;
        if (code !== "200") return message.error(msg);
        message.success(msg, () => {
            this.setState({ open: false })
        });
    }
    del = async (adminid) => {
        const { code } = (await delRoot({ adminid })) || {};
        if (code !== "200") return message.error("删除失败");
        message.success("删除成功");
        this.getRoots();
    }
    componentDidMount() {
        this.getRoots();
    }
}

export default Root;